﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>
<head>
    <title>jquery图片切换插件 jCarousel Lite 网页设计爱好者www.html.org.cn整理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="Ganeshji Marwaha">
    <meta name="description" content="jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.">

    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
	
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
	

<script type="text/javascript">

$(function() {

    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });

	$(".auto").jCarouselLite({
		btnNext: ".next2",
		btnPrev: ".prev2",
		easing: "bounceout",
		auto: 8000,
		speed: 1000,
		scroll: 4,
		visible: 4
	});

	$(".scrollMore").jCarouselLite({
		btnNext: ".next3",
		btnPrev: ".prev3",
		scroll: 2,
		vertical: true
	});

	$(".mouseWheel").jCarouselLite({
		mouseWheel: true
	});
	
	$(".bounceout").jCarouselLite({
		btnNext: ".next5",
		btnPrev: ".prev5",
		easing: "bounceout",
		speed: 1000
	});

	$(".callback").jCarouselLite({
		btnNext: ".next6",
		btnPrev: ".prev6",
		beforeStart: function(a) {
			alert("滚动前调用:" + a);
		},
		afterEnd: function(a) {
			alert("滚动后调用:" + a);
		}
	});

});

</script>

</head>
<body>
网页设计爱好者www.html.org.cn整理
</br>
</br>
1默认配置</br>
<button class="prev"><<</button>
<button class="next">>></button>
        
<div class="anyClass">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>

</br>
2自动滚动(并默认显示4个图片)</br>
<button class="prev2"><<</button>
<button class="next2">>></button>
<div class="auto">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>

</br>
3设定一次滚动2个图片(并垂直显示)</br>
<button class="prev3"><<</button>
<button class="next3">>></button>
<div class="scrollMore">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>

</br>
4鼠标滑轮滚动（需要加入jquery.mousewheel.js文件）</br>
<div class="mouseWheel">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>

</br>
5动画效果（需要加入jquery.easing.1.1.js文件）</br>
<button class="prev5"><<</button>
<button class="next5">>></button>
<div class="bounceout">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>

</br>
6事件回调</br>
<button class="prev6"><<</button>
<button class="next6">>></button>
<div class="callback">
    <ul>
        <li><img src="images/1.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/2.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/3.jpg" alt="" width="100" height="100" ></li>
        <li><img src="images/4.jpg" alt="" width="100" height="100" ></li>
    </ul>
</div>
<br/><br/>
官方地址：http://www.gmarwaha.com/jquery/jcarousellite/

<br/>
<br/>
<br/>
更多js特效请访问：
<a href="http://www.html.org.cn/">网页设计爱好者 http://www.html.org.cn </a>


</body>
</html>        